<template>
    <div>
        <van-address-edit :area-list="areaList" show-delete show-set-default show-search-result
            :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="saveHandler"
            @delete="onDelete" @change-detail="onChangeDetail" />
    </div>
</template>

<script setup>
import { ref, computed, watchEffect } from "vue";
import { showFailToast, showSuccessToast, showToast } from 'vant';
import { areaList } from '@vant/area-data';
import { storeToRefs } from "pinia";
import { useRouter, useRoute } from 'vue-router';

import {addAddressAPI} from "@/api/address.js"

import { useUserStore } from "@/stores/user.js"

let router = useRouter();
let route = useRoute();
let User = useUserStore();
let { isLogin, userid } = storeToRefs(User);

const searchResult = ref([]);


const saveHandler = async (info) => {
    try {
        var res = await addAddressAPI({
            userid: userid.value,
            ...info
        });
        console.log("地址新增成功", res);

        router.push("/address");
    } catch (err) {
        showFailToast(err.message);
    }
}

const onDelete = () => showToast('delete');
const onChangeDetail = (val) => {
    if (val) {
        searchResult.value = [{
            name: '黄龙万科中心',
            address: '杭州市西湖区',
        }];
    } else {
        searchResult.value = [];
    }
};
</script>

<style lang="scss" scoped></style>